<template>
	<div>
		<div class="fd">
			<van-nav-bar class="wbj" @click-left="fh" left-arrow />
			<van-search class="wid" @input="input" v-model="key_word" show-action placeholder="请输入搜索关键词"
				@search="onSearch(key_word)">
				<template #action>
					<div @click="onSearch(key_word)">搜索</div>
				</template>
			</van-search>
		</div>
		<div class="bj">
			<div class="dw" v-show="dx.length>0">
				<van-cell :key="sy" v-for="(sj,sy) in dx" @click="onSearch(sj.title)">
					{{sj.title}}
				</van-cell>
			</div>
		
			<div v-show="dx.length===0">


			
        <div v-if="lsss.length>0">
        <div>
				历史记录
        </div>
				<div v-for="(sj,sy) in lsss" :key="sy" @click="onSearch(sj.value)">
					{{sj.value}}
				</div>

				<div @click="qk" v-show="lsss.length>0">
          清空
        </div>
        </div>
       
		<div v-else style="margin: 180px 0 0 0">
			<van-empty
  class="custom-image"
  image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
  description="您还没有历史搜索"
/>	
		</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		sssj
	} from '@/api/ssjk'
	let dsq = null
	export default {
		data() {
			return {
				key_word: '',
				dx: [],
				lsss: []
			}
		},
		beforeDestroy() {
			clearTimeout(dsq)
			dsq = null
		},
		created() { //let 一个 bbcc 本地存储 bbcc是本地存储的名字
			let bbcc = localStorage.getItem('bbcc') //重要 getTtem 是创建一个 下面有个setTtem是把数据存到本地存储里面
			if (bbcc) { //如果有bbcc 那么 就把bbcc添加到lsss数组里面 由于本地存储里面都是字符串 所以
				this.lsss = JSON.parse(bbcc) //所以要用 JSON.parse(bbcc) 把bbcc转换为对象
			}
		},
		methods: {
      qk(){
          localStorage.removeItem('bbcc')
          this.lsss=[]
      },
			onSearch(key_word) {
				this.key_word = '';
				this.dx = [];
        let index=this.lsss.findIndex(c=>{                //如果里面有相同的
          return c.value===key_word                      //返回的是index
        })
        if(index>=0){
               this.lsss.splice(index,1)            //这里就删除
        }
				console.log(key_word)
				this.lsss.unshift({
					value: key_word,
					timestamp: +new Date()
				})

				localStorage.setItem('bbcc', JSON.stringify(this.lsss)) //跟上面一样 转换为字符串 本地存储只能存字符串
				// this.key_word='';

				this.$router.push('sswb?key_word='+key_word)
			},
			fh() {
				this.$router.back()
			},
			input(key_word) {

				console.log(key_word)
				key_word = key_word.trim();
				if (key_word.length === 0) {
					this.dx = []
					return
				}


				if (dsq) {
					clearTimeout(dsq)
				}
				dsq = setTimeout(a => {
					sssj({
						key_word: this.key_word
					}).then(res => {
						console.log(res)
						this.dx = res.data
					})
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fd {
		display: flex;


	}

	::v-deep .wbj {
		margin: 4px 30px 0 0;
		
	}
	::v-deep  .van-icon-arrow-left{
		color: rgb(0, 0, 8);
	}

	.fd ::v-deep .wid {
		width: 340px;
	}

	.dw {
		position: fixed;
		top: 45px;
		left: 0;
		right: 0;
	}

	.bj {
		background: rgb(220, 220, 220);
		position: fixed;
		height: 100vh;
		width: 100vw;
	}
</style>
